<template>

	<view class="my-del-item" :style="{height:height+'px'}">

		<view class="my-del-item-grid">
			<view class="my-del-item-image" v-for="item in list">
				<view class="my-del-item-image-bg">
					<image v-if="photoType!=1" :src="item.photoUrl+'?x-oss-process=video/snapshot,t_1,m_fast'"
						mode="aspectFill"></image>
					<image :src="item.photoUrl" mode="aspectFill" v-else>
					</image>

					<view class="video" v-if="photoType!=1">
						<image src="/static/image/findPet/play.png" mode=""></image>
						<text>20:20</text>
					</view>
					<view class="checkbox">
						<up-checkbox :customStyle="{marginBottom: '8px'}" name="agree" usedAlone shape="circle"
							@change="(e)=>changeFun(e,item)">
						</up-checkbox>
					</view>
				</view>

			</view>
		</view>
		<view class="my-del-item-setting">
			<image src="/static/image/findPet/upload2.png" mode="" @click="recycleFun"></image>
			<view v-show="state.filterList.length>0">Select <text>{{state.filterList.length}}</text> photos</view>
			<image src="/static/image/findPet/del.png" mode="" @click="delFun"></image>
		</view>

		<view class="del-modal" v-show="state.show">
			<view class="del-pop" :class="{'active':state.show}">
				<view class="top">
					<view class="top-tips">
						<view>
							These photos will be deleted

						</view>
						<view>
							This operation cannot be undonef
						</view>
					</view>
					<up-line style="width: 100%; margin-top: 10rpx;"></up-line>
					<view class="top-del" @click="confirmDelFun">
						Delete <text> {{state.filterList.length}} </text> photos
					</view>
				</view>
				<view class="bottom" @click="state.show=false">
					<text>Cancel</text>
					<up-line style="width: 100%; margin-top: 10rpx;"></up-line>
				</view>
			</view>
		</view>

	</view>


</template>

<script setup>
	import {
		addRecycleBinApi,
		delRecycleBinApi,
		backRecycleBinApi,
	} from '@/api/album.js'
	import {
		defineEmits
	} from 'vue'
	const props = defineProps(['list', 'photoType'])
	const emits = defineEmits(['delConfirm'])
	const height = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - 44
	const state = reactive({
		show: false,
		filterList: []
	})
	const delFun = () => {
		if (state.filterList.length <= 0) return
		state.show = true

	}
	//选中
	const changeFun = (e, item) => {
		if (e) {
			state.filterList.push(item.photoAlbumId)
		} else {
			const index = state.filterList.findIndex(i => i === item.photoAlbumId)
			state.filterList.splice(index, 1)
		}

	}
	//退回相册
	const recycleFun = () => {
		console.log(state.filterList);
		state.filterList.forEach(async photoAlbumId => {
			const res = props.photoType == 3 ? await backRecycleBinApi({
				photoAlbumId
			}) : null
			console.log(res);
		})
	}
	//确定删除
	const confirmDelFun = () => {
		state.filterList.forEach(async photoAlbumId => {
			const res = props.photoType == 3 ? await delRecycleBinApi({
				photoAlbumId
			}) : await addRecycleBinApi({
				photoAlbumId
			})
			uni.tools.showTips('删除成功', () => {
				emits('delConfirm')
			})
		})
	}
	const toRecently = () => {
		uni.navigateTo({
			url: '/pages/FindPet/recentlyDel'
		})
	}
</script>

<style lang="scss" scoped>
	.my-del-item {
		background-color: #f5f8fb;
		padding: 32rpx;
		position: relative;
		box-sizing: border-box;

		// padding-bottom: 50rpx;
		.my-del-item-grid {

			// margin-top: 40rpx;
			width: 100%;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 4px;
			padding-bottom: 65px;
			// border: 1px solid;
			// padding-bottom: 40rpx;
			// border-bottom: 4px solid #eef1f4;

			.my-del-item-image {

				display: flex;
				flex-direction: column;

				// display: grid;
				.my-del-item-image-bg {
					width: 100%;
					// border: 1px solid red;
					background-color: #e5e5e5;
					// border-radius: 15rpx;
					height: 90px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					image {
						width: 100%;
						height: 90px;
					}

					.upload {
						position: absolute;
						right: 0;
						top: 0;
						width: 40rpx;
						height: 40rpx;
					}

					.video {
						position: absolute;
						left: 0;
						bottom: 10rpx;

						// width: 40rpx;
						// height: 40rpx;
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							font-size: 20rpx;
							margin-left: 10rpx;
							color: #fff;
						}

					}

					.checkbox {
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}



			}
		}

		.my-del-item-setting {
			// border: 1px solid red;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			position: fixed;
			height: 60px;
			width: 100vw;
			box-sizing: border-box;
			background-color: #fff;
			// padding: 10rpx 20rpx 30rpx 20rpx;
			padding: 0 32rpx;
			border-top: 1px solid #e5e5e5;
			color: #5f5848;
			font-weight: 900;
			font-size: 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.del-modal {

		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .4);
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;

		transition: all .3s;

		// z-index: 9999;
		.del-pop {


			transition: all .3s;
			width: calc(100vw - 64rpx);
			// border: 1px solid red;
			height: 180px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			position: relative;
			// top: 180px;
			// transform: translateY(180px);

			.top {
				border-radius: 25rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx 0;
				padding-bottom: 0;

				// border-bottom: 1px solid #b1b2b4;
				.top-tips {
					display: flex;
					flex-direction: column;
					align-items: center;
					// border-bottom: 1px solid #b1b2b4;
					width: 100%;
					padding-bottom: 20rpx;
					// justify-content: space-between;
					// border: 1px solid red;
					box-sizing: border-box;

					view {
						color: #b1b2b4;
						font-weight: 900;
						font-size: 26rpx;
					}
				}

				.top-del {
					padding: 25rpx 0;
					color: red;
					font-weight: bold;
					display: flex;
					align-items: center;
					font-size: 32rpx;

					text {
						margin: 0 10rpx;
					}
				}
			}

			.bottom {
				flex: 1;
				// border: 1px solid red;
				margin-top: 10rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				color: #5592f4;
				font-weight: 600;
				border-radius: 25rpx 25rpx 0 0;
				// border-bottom: 1px solid #b1b2b4;
			}
		}

		.active {
			// transform: translateY(-180px);
		}
	}
</style>